import React from "react";

let Child = ({ data, handleClick }) => {
  console.log("child render");
  return <button onClick={handleClick}>+{data.number}</button>;
};
Child = React.memo(Child);

function Hook1() {
  console.log("hook1 render");
  const [name, setName] = React.useState("lihh");
  const [number, setNumber] = React.useState(0);
  const data = React.useMemo(() => ({ number }), [number]);
  const handleClick = React.useCallback(() => setNumber(number + 1), [number]);

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={(event) => setName(event.target.value)}
      />
      <Child data={data} handleClick={handleClick} />
    </div>
  );
}

export default Hook1;
